<template>
    <div>
        <!-- 按钮 -->
        <!-- @click="toFormHandler"：跳转到表单的处理器，toFormHandler是一个方法 -->
        <div class="btns">
            <el-button type="primary" size="small" @click="toFormHandler">新增</el-button>
        </div>
        <!-- 表格 -->
        <div class="tab_content">
            <el-table :data="roleprivileges" style="width: 100%" size="small">
                <el-table-column prop="roleId" label="角色编号" width="180"> </el-table-column>
                <el-table-column prop="privilegeId" label="权限编号" width="180"> </el-table-column>
                <!-- 操作列 -->
                <el-table-column width="100" align="center" label="操作">
                    <!-- slot-scope="scope"：作用域插槽 -->
                    <template slot-scope="scope">
                        <el-button type="text" @click="editHandler(scope.row)">修改</el-button>
                        <!-- scope.row：当前行数据 -->
                        <el-button type="text" @click="deleteHandler(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import { del, get } from '@/utils/request'
export default {
    data(){ 
        return {
			roleprivileges:[],
            visible:false
        }
    },
    methods:{
        // 删除的处理函数
        deleteHandler(row){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              // 当用户点击了确定才会执行
              let url = "http://localhost:8888/roleprivilege/deleteById"
              // {id:row.id}是一个对象get、post、delete的三个方法在传参的时候只能传对象
              // 记得导入import { del, get } from '@/utils/request'
              del(url,{id:row.id}).then(resp =>{
                  // 提示
                  this.$message({type:"success",message:resp.message});
                  // 更新页面
                  this.loadRoleprivileges();
                })
              })
        },
        // 修改的处理函数
        editHandler(row){
          // 跳转到表单。$router：vue的一个模块；push：推动；
          // {}内为一个对象,里面有两个元素，path为form表单路由的路径（子路由+父路由），
          // query为前端传递进来的参数
          this.$router.push({
              path:"/lpa/roleprivilege_form",
              query:row
          })
        },
        toFormHandler(){
            this.$router.push({
                path:"/lpa/roleprivilege_form",
                // query:
            })
        },
        loadRoleprivileges(){
            let url = "http://localhost:8888/roleprivilege/query"
            get(url).then(resp=>{
                this.roleprivileges = resp.data;
            })
        }
    },
    created(){
        this.loadRoleprivileges();
    }
}
</script>
<style lang="sass" scoped>

</style>